<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'

onMounted(() => {
  var chartDom = document.getElementById('chart1')
  var myChart1 = echarts.init(chartDom)

  //景点推荐
  var option1 = {
    title: {
      text: '景点推荐',
      // subtext: 'Fake Data',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: '王府大街' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  myChart1.setOption(option1)

  var chartDom2 = document.getElementById('chart2')
  var myChart2 = echarts.init(chartDom2)
  var option2 = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
      }
    ]
  }

  myChart2.setOption(option2)

  var chartDom3 = document.getElementById('chart3')
  var myChart3 = echarts.init(chartDom3)

  // 美食推荐
  var option3 = {
    title: {
      text: '美食推荐',
      // subtext: 'Fake Data',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: '王府大街' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  myChart3.setOption(option3)

  var chartDom4 = document.getElementById('chart4')
  var myChart4 = echarts.init(chartDom4)
  var option4 = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
      }
    ]
  }

  myChart4.setOption(option4)

  // var chartDom5 = document.getElementById('chart5')
  // var myChart5 = echarts.init(chartDom5)

  // // 休闲娱乐
  // var option5 = {
  //   title: {
  //     text: '休闲娱乐',
  //     // subtext: 'Fake Data',
  //     left: 'center'
  //   },
  //   tooltip: {
  //     trigger: 'item'
  //   },
  //   legend: {
  //     orient: 'vertical',
  //     left: 'left'
  //   },
  //   series: [
  //     {
  //       name: 'Access From',
  //       type: 'pie',
  //       radius: '50%',
  //       data: [
  //         { value: 1048, name: '王府大街' },
  //         { value: 735, name: 'Direct' },
  //         { value: 580, name: 'Email' },
  //         { value: 484, name: 'Union Ads' },
  //         { value: 300, name: 'Video Ads' }
  //       ],
  //       emphasis: {
  //         itemStyle: {
  //           shadowBlur: 10,
  //           shadowOffsetX: 0,
  //           shadowColor: 'rgba(0, 0, 0, 0.5)'
  //         }
  //       }
  //     }
  //   ]
  // }
  // myChart5.setOption(option5)

  // var chartDom6 = document.getElementById('chart6')
  // var myChart6 = echarts.init(chartDom6)
  // var option6 = {
  //   xAxis: {
  //     type: 'category',
  //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  //   },
  //   yAxis: {
  //     type: 'value'
  //   },
  //   series: [
  //     {
  //       data: [120, 200, 150, 80, 70, 110, 130],
  //       type: 'bar'
  //     }
  //   ]
  // }

  // myChart6.setOption(option6)
})
</script>

<template>
  <page-container title="数据统计">
    <el-row style="padding-left: 80px">
      <el-col :span="12">
        <div id="chart1" style="width: 600px; height: 500px"></div>
      </el-col>
      <el-col :span="12">
        <div id="chart2" style="width: 600px; height: 500px"></div> </el-col
    ></el-row>
    <el-row style="padding-left: 80px">
      <el-col :span="12">
        <div id="chart3" style="width: 600px; height: 500px"></div>
      </el-col>
      <el-col :span="12">
        <div id="chart4" style="width: 600px; height: 500px"></div> </el-col
    ></el-row>
    <!-- <el-row style="padding-left: 80px">
      <el-col :span="12">
        <div id="chart5" style="width: 600px; height: 500px"></div>
      </el-col>
      <el-col :span="12">
        <div id="chart6" style="width: 600px; height: 500px"></div> </el-col
    ></el-row> -->
  </page-container>
</template>
<style lang="scss" scoped></style>
